import React from 'react';
import {
  TestSpan,
  Test,
  CalendarNow,
} from '@/pages/home/style';
import ReactCalendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import dayjs from 'dayjs';

const Home = () => (
  <>
    <Test>
      <ReactCalendar
        view="year"
        tileContent={({ date, view }) => (view === 'year'
          && dayjs(date.toLocaleDateString()).format('YYYY-MM')
          === dayjs().format('YYYY-MM')
          ? <CalendarNow>•当月</CalendarNow>
          : null)}
        activeStartDate={new Date(2020, 0, 1)}
        maxDate={new Date()}
        prev2Label={null}
        next2Label={null}
        prevLabel="«"
        nextLabel="»"
      />
    </Test>
    <TestSpan>this is testspan</TestSpan>
  </>
);

export default Home;
